<template>
  <el-dialog
    :title="cardForm.name"
    class="gl_dialog_TitleLine gl_dl_footer"
    :visible.sync="dialogVisible"
    :close-on-click-modal="false"
    :before-close="cancelDialog"
    width="805px"
  >
    <el-form ref="cardForm" v-loading="loading" class="gl_form_mini" :model="cardForm" :rules="cardForm_rules" style="padding: 0 30px" label-width="100px">
      <p style="font-size:20px;color:#409EFF">{{ cardForm.name }}</p>
      <p class="nav">
        <span class="header">持卡人</span><span class="header_type">{{ studentName }}</span>
        <span class="header">编号</span><span class="header_number">{{ cardForm.cardNumber }}</span>
        <span class="header">类型</span>
        <span class="header_code"> {{ cardForm.chargeTypeCode === 'ClassPeriod' ? '课时卡' : '日期卡' }}</span>
      </p>
      <!-- <el-form-item label="卡种类型">
        <el-radio-group v-model="cardForm.chargeTypeCode">
          <el-radio v-for="item in dict.chargeType" :key="item.code" disabled :label="item.code">{{ item.value }}</el-radio>
        </el-radio-group>
      </el-form-item> -->
      <!-- <el-form-item label="卡种编号">
        <el-input v-model="cardForm.cardNumber" disabled type="text" size="mini" />
      </el-form-item>
      <el-form-item label="持卡人">
        <el-input v-model="studentName" disabled type="text" size="mini" />
      </el-form-item> -->
      <el-form-item v-if="cardForm.chargeTypeCode === 'ClassPeriod'" style="font-size:14px;color:#999999;margin-top:15px" prop="remainClassPeriod" label="卡内课时">
        <el-input v-model="cardForm.remainClassPeriod" style="width:256px" placeholder="请输入" type="number" :min="1" />
      </el-form-item>
      <el-form-item style="font-size:14px;color:#999999" label="有效期" prop="effectiveDate">
        <el-date-picker
          v-model="cardForm.effectiveDate"
          style="width:256px"
          type="date"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          placeholder="请选择日期"
          @change="handleTimeChange"
        />
      </el-form-item>
      <el-form-item style="font-size:14px;color:#999999" label="变更原因" prop="updateRemark">
        <el-input v-model="cardForm.updateRemark" placeholder="请输入" maxlength="200" type="textarea" :rows="4" size="mini" />
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button size="mini" @click="cancelDialog">取消</el-button>
      <el-button type="primary" size="mini" :loading="addfalse" @click="submit()">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { mapState, mapActions } from 'vuex';
import validator from '@/lib/validate/index.js';
import { StudentMembershipCardInput } from '@/lib/form/hall/swaggerForm';
import { api_PUT_ClubStudentCardsIdStudentCard } from '@/extend/api/hallswaggerApi/app';
export default {
  data() {
    return {
      addfalse: false,
      studentName: '',
      currentId: '',
      dialogVisible: false,
      currentTimeType: '',
      loading: false,
      cardForm: new StudentMembershipCardInput(),
      cardForm_rules: {
        effectiveDate: [{ required: true, message: '有效期时间不能为空', trigger: 'blur' }],
        updateRemark: [{ required: true, message: '变更原因不能为空', trigger: 'blur' }],
        remainClassPeriod: [
          { required: true, message: '卡内课时不能为空', trigger: 'blur' },
          {
            validator(rule, value, callback) {
              callback(validator.checkPositiveNumber(value, '请输入正确课时数值'));
            },
            trigger: 'blur'
          }]
      }
    };
  },
  computed: {
    ...mapState({
      dict: state => state.dict.dict
    })
  },
  methods: {
    ...mapActions({ getDict: 'dict/getDict' }),
    submit() {
      // 按日期收费
      if (this.cardForm.chargeTypeCode === 'Date') {
        this.cardForm.remainClassPeriod = null;
        if (this.cardForm_rules.remainClassPeriod.indexOf({ required: true, message: '卡内课时不能为空', trigger: 'blur' }) !== -1) {
          this.cardForm_rules.remainClassPeriod.pop({ required: true, message: '卡内课时不能为空', trigger: 'blur' });
        }
      }
      // 按课时收费
      if (this.cardForm.chargeTypeCode === 'ClassPeriod') {
        if (this.cardForm_rules.remainClassPeriod.indexOf({ required: true, message: '卡内课时不能为空', trigger: 'blur' }) === -1) {
          this.cardForm_rules.remainClassPeriod.unshift({ required: true, message: '卡内课时不能为空', trigger: 'blur' });
        }
      }
      this.$refs.cardForm.validate(valid => {
        if (valid) {
          this.loading = true;
          this.addfalse = true;
          api_PUT_ClubStudentCardsIdStudentCard(this.currentId, this.cardForm).then(res => {
            this.loading = false;
            this.$message({ type: 'success', message: '修改成功' });
            this.dialogVisible = false;
            this.cardForm = new StudentMembershipCardInput();
            this.$parent.getStudent();
            this.addfalse = false;
          }, error => {
            this.loading = false;
            const _msg = error.error.message || error.message;
            this.$message({ type: 'error', message: _msg });
            this.addfalse = false;
          });
        } else {
          return false;
        }
      });
    },
    handleTimeChange(time) {
    },
    cancelDialog() {
      this.dialogVisible = false;
      this.currentId = '';
      this.cardForm = new StudentMembershipCardInput();
    }
  }
};
</script>
<style lang="scss" scoped>
::v-deep .el-form-item__label{
   font-size:14px;
   color:#999999
  }
  .header{
font-size:14px;
color:#999999;
  }
  .nav {
    margin-top: 20px;
    display: flex;
    align-items: center;
  }
.header_type{
  font-size:16px;
  color:#353434;
  margin-left:10px;
  margin-right:107px;
  display: inline-block;
  width:110px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.header_number {
   font-size:16px;
   margin-left:10px;
  color:#353434;
  margin-right:70px;
  display: inline-block;
  width:180px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.header_code {
   font-size:16px;
   margin-left:10px;
  color:#353434;
  display: inline-block;
  width:100px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>
